<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MuLinson.Exhibition</title>
	<style type="text/css">
		body
		{
			font-family: '微软雅黑';
			background-image: url(img/bck.jpg);
			background-repeat: no-repeat;
			background-size: cover;
		}

		*
		{
			margin: 0;
			height: 0;
		}

		*,*:after,*:before
		{
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			-o-box-sizing: border-box;
			box-sizing: border-box;
		}

		.container
		{
			height:160px;
			margin: 120px 0;
			text-align: center;
			background-color: rgba(255,255,255,.3);			
			transition: opacity 0.3s,transform 0.3s;
		}

		h3
		{
			display: inline-block;
			width: 100%;
			height: 30px;
			border-bottom: 1px solid #1f1f1f;
			color: #110219;
			text-align: center;
		}

        .nav
        {
        	width: 840px;
        	margin: 0 auto;
        }

		.nav>li
		{
			list-style: none;
		}

		.nav>li>a
		{
			position: relative;
			font-size: 15px;
			text-decoration: none;
			float: left;
			color: #fff;
			height: 20px;
			list-style: none;
			margin: 70px;
		}

		.nav>li>a:hover
		{
			color: #e7847a;
			border-bottom: 1px solid #e7847a;
		}

		.img
		{
			position: absolute;
			bottom: 50px;
			margin-bottom: 10px;
			left: 50%;
			margin-left: -50px;
			height: 100px;
			width: 100px;
			opacity: 0;
			transform: scale(1);
			transition: all 0.3s 0.1s;
		}
		
		.nav>li>a:hover .img
		{
			opacity: 1;
			bottom: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
			<ul class="nav">
				<li><a href="file/index.html">学习与整理<img src="img/0.png" class="img img1"></a></li> 
				<li><a href="web_model/mulinson.html">模板与设计<img src="img/10.png" class="img img2"></a></li>
				<li><a href="draw/index.html">画册<img src="img/13.png" class="img img3"></a></li>
				<li><a href="../index.html">HOME<img src="img/15.png" class="img img4"></a></li>
			</ul>
	</div>
</body>
</html>
